<!--  -->
<template>
    <li>
        <label>
            <input
                type="checkbox"
                @click="handleCheck(todo.id)"
                v-model="todo.done"
            />
            <span>{{ todo.name }}</span>
        </label>
        <button class="btn btn-danger" @click="del(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name: "MyItem",
    data() {
        return {};
    },
    props: ["todo", "checkDone", "deleteTodo"],
    methods: {
        handleCheck(id) {
            this.checkDone(id);
        },
        del(id) {
            this.$confirm("是否去掉当前任务, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteTodo(id);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style  scoped>
/*item*/
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

li:hover button {
    display: block;
}
li:hover {
    background-color: rgba(80, 80, 80, 0.1);
}
</style>
